<form [formGroup]="formGroup" class="container">
    <h1 mat-dialog-title class="force-lbk pointer-move" mat-dialog-draggable>{{'script.scheduling-title' | translate}}</h1>
    <mat-icon (click)="onNoClick()" class="dialog-close-btn">clear</mat-icon>
    <div mat-dialog-content>
        <div class="my-form-field block mt10 mb10">
            <span>{{'script.scheduling-type' | translate}}</span>
            <mat-select formControlName="mode" class="sel-type">
                <mat-option *ngFor="let mode of schedulingMode" [value]="mode">
                    {{ 'script.scheduling-' + mode | translate }}
                </mat-option>
            </mat-select>
        </div>
        <ng-container [ngSwitch]="formGroup.controls.mode.value">
            <ng-container *ngSwitchCase="'start'">
                <div class="my-form-field block mt10">
                    <span>{{'script.delay' | translate}}</span>
                    <input numberOnly formControlName="interval" min="0" type="number" class="row-input">
                </div>
            </ng-container>
            <ng-container *ngSwitchCase="'scheduling'">
                <div class="my-form-field block">
                    <button mat-icon-button
                            (click)="onAddScheduling()"
                            type="button">
                        <mat-icon>add_circle_outline</mat-icon>
                    </button>
                    {{'script.scheduling-add-item' | translate}}
                </div>
                <div class="schedulig-list mt10">
                    <div *ngFor="let item of formGroup.controls.schedules.value.controls; let i = index"
                         class="mt5 mb5">
                        <app-ngx-scheduler [formGroup]="item"
                                           [removable]="true"
                                           (onRemove)="onRemoveScheduling(i)">
                        </app-ngx-scheduler>
                    </div>
                </div>
            </ng-container>
            <ng-container *ngSwitchDefault>
                <div class="my-form-field block">
                    <span>{{'script.interval' | translate}}</span>
                    <input numberOnly formControlName="interval" min="0" type="number" class="row-input">
                </div>
            </ng-container>
        </ng-container>
    </div>
    <div mat-dialog-actions class="dialog-action">
        <button mat-raised-button (click)="onNoClick()" cdkFocusInitial>{{'dlg.cancel' | translate}}</button>
        <button mat-raised-button color="primary" (click)="onOkClick()">{{'dlg.ok' | translate}}</button>
    </div>
</form>